<template>
  <div class="app-container">
    <div class="my-10" v-if="!tableData.length">
      <el-button type="primary" @click="addNotice">新增公告</el-button>
    </div>
    <bdTable :tableHeader="tableHeader" :tableData="tableData" class="mb-10" />
    <addNoticeAndEditNotice ref="noticeInfo" @update:visible="searchNotice(true)" />
  </div>
</template>
<script>
import { gdtzPage } from '@/api/gdtz'
import addNoticeAndEditNotice from './addNoticeAndEditNotice.vue'
export default {
  name: '',
  components: {
    addNoticeAndEditNotice
  },
  data () {
    return {
      tableHeader: {
        type: 'selection',
        header: [
          {
            prop: 'detail',
            label: '公告内容'
          },
          {
            prop: 'updateTime',
            label: '更新时间'
          },
          {
            label: '操作',
            type: 'button',
            width: 150,
            btn: [
              {
                id: 1,
                name: '编辑',
                handler: this.handleEdit
              }
            ]
          }
        ]
      },
      tableData: [],
      // 分页
      pages: {
        page: 1,
        pageSize: 10
      }
    }
  },
  // 计算属性
  computed: {},
  watch: {},
  mounted () {
    this.searchNotice()
  },
  methods: {
    async searchNotice (clearPage = false) {
      if (clearPage) {
        this.pages.page = 1
        this.pages.pageSize = 10
      }
      const { list } = await gdtzPage(this.pages)
      this.tableData = list
    },
    // 编辑公告
    handleEdit (e, row) {
      this.$refs.noticeInfo.isShow(row, true)
    },
    addNotice () {
      this.$refs.noticeInfo.isShow()
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
